<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>播放界面-GEM</title>
<style>
*{padding:0; margin:0}
body{ background-image:url(../image/music/DZQ/g3-bg.jpg); background-size:cover;background-repeat:no-repeat; overflow:hidden}
ul{
	height:200px; width:200px;transform-style:preserve-3d; transform:scale(1.3,1); animation:move 8s linear 0s infinite normal;margin:150px 150px}
ul:hover{ animation-play-state:paused; }
ul:hover li img{ opacity:0.5}
ul li:hover img{opacity:1;}
ul li{ width:200px; height:200px; list-style:none; position:absolute;top:0; left:0; font-size:36px; text-align:center; 								line-height:200px; background-color:#000}
img{width:200px; height:200px;}
ul li:nth-child(1){
	
	transform:translate(0,100px) rotateX(180deg) rotateX(90deg)}
ul li:nth-child(2){

	transform:translate(0,-100px) rotateX(90deg)}
ul li:nth-child(3){

	transform:translate(-100px,0) rotateY(90deg)}
ul li:nth-child(4){

	transform:translate(100px,0) rotateY(90deg)}
ul li:nth-child(5){

	transform:translateZ(100px)}
ul li:nth-child(6){

	transform:translateZ(-100px) }
#x-1{ width:100px; height:100px; position:absolute; bottom:50px; left:50px;
     animation:x-1move 10s linear 0s infinite normal}
@keyframes move{
	from{
		transform: rotatex(-25deg) rotatey(0deg);
		}
	to  {
		transform:rotatex(-25deg) rotatey(360deg) ;
		}
	}
@keyframes x-1move{
	0%{
			left:50px; bottom:50px; opacity:1
		}
	20%{
			left:300px; bottom:300px; opacity:0
		}
	40%{
			left:550px; bottom:550px; opacity:1
		}
	60%{
			left:850px; bottom:300px; opacity:0.3
		}
	80%{
			left:1105px; bottom:100px; opacity:1
		}
	100%{
			left:1300px; bottom:-20px; opacity:0.3
		}
	}
</style>
</head>

<body>
<a href="./Accordion.html">
<ul>
<li></li>
<li><img src="../image/music/DZQ/2.jpg" /></li>
<li><img src="../image/music/DZQ/2.jpg" /></li>
<li><img src="../image/music/DZQ/3.jpg"></li>
<li><img src="../image/music/DZQ/g3.jpg"/></li>
<li><img src="../image/music/DZQ/1.jpg"/></li>
</ul>
</a>
</body>
</html>
